<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    //事件处理
    window.onload = function(){//匿名函数
      var a = document.getElementsByClassName("bg");
      var b = document.getElementsByName("btn");
      //事件处理：1.事件源，2.事件的类型，3.事件的处理代码，通过函数来实现
      b[0].onclick = qiuhe();//函数的调用
      
      //函数的定义
      function qiuhe() {
        a[2].value = Number(a[0].value)+Number(a[1].value)
      }
      // java：
      // 返回类型 方法名(参数){
      //   方法体
      // }
      // JavaScript：
      // function 函数名(参数) {
      //   函数体
      // }

    }
  
    //分支语句
    window.onload = function(){
      // if(条件){
      //   语句
      // }[else if(条件){

      // }else ...]
      var  a = document.getElementsByName("shuixianhua");
      a[2].onclick = function () {
        var num_b = Number(a[0].value);
        if(num_b>=100&&num_b<=999){
          var bai = Math.floor(num_b/100);
          var shi = Math.floor(num_b/10)%10;
          var ge = num_b % 10;
          if(num_b == ge*ge*ge+shi*shi*shi+bai*bai*bai){
            a[1].value = '是水仙花数';
          }else{
            a[1].value = '不是水仙花数';
          }
        }else{
          alert("请输入一个三位整数");
        }
        

        // var c = 173;
        // console.log(Math.floor(c/100));//向下取整
        // console.log(Math.ceil(c/100));//向上取整
        // console.log(Math.round(c/100));//四舍五入
        // 123  
        // bai 123整除100  Math.floor(123/100)
        // shi 123先整除10，再对10取余数 Math.floor(123/10)%10
        //     123先对100取余数，再对10整除
        // ge 123对10取余数   123%10
      }
    }
    
    //循环语句
    // var sum = 0;
    // var i =1;//循环变量赋初值
    // while(i<=100){//循环条件
    //   sum += i;
    //   i++;//循环变量的改变
    // }
    
    // var sum = 0;
    // for(var i=1;i<=10;i++){
    //   var ji = 1;
    //   for(var j =1 ;j<=i;j++){
    //     ji = ji * j;
    //   }
    //   sum += ji;
    // }
    // //i！
    // var i = 5;
    // var ji = 1;
    // for(var j =1 ;j<=i;j++){
    //   ji = ji * j;
    // }
    window.onload = function () {
      var str = "";
      for(var i=1;i<=9;i++){
        for(var j=1;j<=i;j++){
          str += i + "*" + j + "=<span>" + (i*j)+"</span>";
        }
        str += "<br>";
      }
      // console.log(str);
      var a = document.getElementById("chengfa");
      a.innerHTML = str;
      // a.innerText = str;
    }
      
  </script>
  <style>
    span{
      width: 50px;
      display: inline-block;
      color: red;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <input type="text" class="bg">+
  <input type="text" class="bg">=
  <input type="text" class="bg">
  <input type="button" value="计算" name="btn">
  <hr>
  <h3>水仙花数</h3>
  <input type="text" placeholder="请输入一个数" name="shuixianhua">
  <input type="text" placeholder="结果"  name="shuixianhua">
  <input type="button" value="计算"  name="shuixianhua">
  <hr>
  <h3>九九乘法表</h3>
  <div id="chengfa">

  </div>

</body>
</html>